<template>
  <div>
    <el-card style="width:35%;margin:0 auto;">
      <el-row style="display: flex;">
        <el-col :span="8" style="text-align:left">
          <span style="font-size: 16px;margin-right:20px;">{{ levelForm.level }}</span>
          <span style="font-size:12px">词汇量: {{ levelForm.num }}</span>
        </el-col>
        <el-col :span="11">
          <div style="width: 10px; height: 1px;"></div>
        </el-col>
        <el-col :span="5" style="display: flex; align-items: center; justify-content: center;">

          <span class="spannb"><i class="el-icon-plus" style="font-size: 22px;" @click="openAdd()"></i></span>
        </el-col>
      </el-row>
      <div style="height:10px"></div>
      <div><el-button @click="openbian()" type="primary"
          plain
          icon="el-icon-loading"
          size="mini">编辑器</el-button></div>
      <div style="height:10px"></div>
      <div>
        <el-table :data="questionData" style="width: 100%;" :header-cell-class-name="'headerBg'">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-row>
                <el-col :span="2">
                  <div style="height:1px"></div>
                </el-col>
                <el-col :span="2"><span>成语</span></el-col>
                <el-col :span="16"><span class="spans">{{ props.row.idiomValue }}</span><span>{{ props.row.pinyin }}</span></el-col>
                <el-col :span="4">
                  <div style="height:1px"></div>
                </el-col>
              </el-row>
              <div style="height:10px"></div>
              <el-row>
                <el-col :span="2">
                  <div style="height:1px"></div>
                </el-col>
                <el-col :span="2"><span>出处</span></el-col>
                <el-col :span="16"><span>{{ props.row.idiomFrom }}</span></el-col>
                <el-col :span="4">
                  <div style="height:1px"></div>
                </el-col>
              </el-row>
              <div style="height:10px"></div>
              <el-row>
                <el-col :span="2">
                  <div style="height:1px"></div>
                </el-col>
                <el-col :span="2"><span>释义</span></el-col>
                <el-col :span="16"><span>{{ props.row.interpretation }}</span></el-col>
                <el-col :span="4">
                  <div style="height:1px"></div>
                </el-col>
              </el-row>

            </template>
          </el-table-column>
          <el-table-column prop="idiomValue" label="成语" align="center" height="100px">
            <template slot-scope="scope">
              <div style="height: 40px; display: flex; align-items: center; justify-content: center;">
                <span style="">{{scope.row.idiomValue}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="350px" align="center">
            <template slot-scope="scope">
              <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row)">
                <el-button type="primary" size="small" slot="reference" style="background:none;border:0px">
                  <span class="span" title="删除"><i class="el-icon-delete"></i>删除</span>
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 添加词汇 -->
    <el-dialog :visible.sync="addButton" width="20%" title="添加词汇" :close-on-click-modal="false" :before-close="addHandleClose">
      <el-form :model="addForm" ref="addForm" :rules="rules">
        <el-form-item prop="idiomValue">
          <el-input v-model="addForm.idiomValue" placeholder="请输入词语"></el-input>
        </el-form-item>
        <el-form-item prop="idiomFrom">
          <el-input v-model="addForm.idiomFrom" placeholder="请输入词语出处"></el-input>
        </el-form-item>
        <el-form-item prop="interpretation">
          <el-input v-model="addForm.interpretation" placeholder="请输入词语释义"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="insert()">提交</el-button>
    </el-dialog>
    <!-- 修改词汇 -->
    <el-dialog :visible.sync="upButton" width="20%" title="修改词汇" :close-on-click-modal="false" :before-close="upHandleClose">
      <el-form :model="upForm" ref="upForm" :rules="upRules">
        <el-form-item prop="idiomValue">
          <el-input v-model="upForm.idiomValue" placeholder="请输入词语"></el-input>
        </el-form-item>
        <el-form-item prop="idiomFrom">
          <el-input v-model="upForm.idiomFrom" placeholder="请输入词语出处"></el-input>
        </el-form-item>
        <el-form-item prop="interpretation">
          <el-input v-model="upForm.interpretation" placeholder="请输入词语释义"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="update()">提交</el-button>
    </el-dialog>
    <!-- 详细词汇 -->
    <!-- <el-dialog :visible.sync="infoButton" width="20%" :close-on-click-modal="false" :before-close="infoHandleClose">
      <div>
        <span>{{this.infoForm.pinyin}}</span>
      </div>
    </el-dialog> -->
    <!-- 编辑器 -->
    <el-dialog :visible.sync="bian">
      <el-button @click="removeB()">清空编辑</el-button>
      <div v-for="item in trData" :key="item.id" style="height:100px">
        <div v-for="j in item.tdData" :key="j.space" class="custom-div" @click="open(item,j)" :style="{ backgroundImage: 'url(' + require('@/assets/bgst.png') + ')' }">
          <span style="font-size:24px"><b>{{j.word}}</b></span>
          <!-- <b v-if="j.hide==0"> -->
        </div>
      </div>
    </el-dialog>
    <!-- 无字 -->
    <el-dialog :visible.sync="tianzi" style="width:30%;margin:0 auto" v-if="tianzizi==0">
      <el-form :model="form">
        <el-form-item>
          <el-select style="width: 65%; margin-left: 20px" v-model="form.id" placeholder="请选择成语">
            <el-option v-for="item in questionData1" :key="item.idiomValue" :label="item.idiomValue" :value="item.id">                
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="fangxiang" :label=0>横向</el-radio>
          <el-radio v-model="fangxiang" :label=1>纵向</el-radio>
        </el-form-item>
      </el-form>
      <el-button @click="tijiao()">提交</el-button>
    </el-dialog>
    <!-- 有字 -->
    <el-dialog :visible.sync="tianzi" style="width:30%;margin:0 auto" v-if="tianzizi==1">
      <el-form :model="form">
      字:{{form.word}}
        坐标:{{form.space}}
        
        <el-form-item>
          <!-- <el-radio v-model="hide" :label=0>显示</el-radio>
          <el-radio v-model="hide" :label=1>隐藏</el-radio> -->
          <el-radio-group v-model="form.hide" @change="radioChange()">
            <el-radio :label="0">显示</el-radio>
            <el-radio :label="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="重复字成语">
          <el-select style="width: 65%; margin-left: 20px" v-model="form.idiomValue" placeholder="请选择成语">
            <el-option v-for="item in questionData" :key="item.idiomValue" :label="item.idiomValue" :value="item">                
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button @click="tijiaojiao()">提交</el-button>
    </el-dialog>
    <!-- 详细 -->
    <el-dialog :visible.sync="xiangxi" style="width:30%;margin:0 auto" v-if="tianzizi==1">

    </el-dialog>
  </div>
</template>

<script>
import { pinyin } from "pinyin-pro";
export default {
  data() {
    return {
      // 当前关卡id
      id: 0,
      // 当前关卡信息
      levelForm: {},
      // 关卡词语数组
      questionData: [],
      // 关卡词语数组
      questionData1: [],
      // 编辑器开关
      bian: false,
      // 字数组
      wordData: [],
      // 坐标数组
      trData: [],
      // 填字开关
      tianzi: false,
      // 空位状态
      tianzizi: 0,
      // 填字方向
      fangxiang: 0,
      // json数组
      jsonData: [],
      // 显示隐藏
      hide: 0,
      // 填字表单
      form: {},
      // 字详细
      xianForm: {},
      // 字信息
      xiangxi: false,
      // 词语详细开关
      infoButton: false,
      // 词语表单
      infoForm: {},
      // 词语修改开关
      upButton: false,
      // 词语修改表单
      upForm: {},
      // 词语添加开关
      addButton: false,
      // 词语添加表单
      addForm: {},
      rules: {
        idiomValue: [
          { required: true, message: "请输入成语", trigger: "blur" },
        ],
        idiomFrom: [
          { required: true, message: "请输入成语出处", trigger: "blur" },
        ],
        interpretation: [
          { required: true, message: "请输入成语释义", trigger: "blur" },
        ],
      },
      upRules: {
        idiomValue: [
          { required: true, message: "请输入成语", trigger: "blur" },
        ],
        idiomFrom: [
          { required: true, message: "请输入成语出处", trigger: "blur" },
        ],
        interpretation: [
          { required: true, message: "请输入成语释义", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    // 获取关卡id
    this.levelForm = JSON.parse(this.$route.params.form);
    this.id = this.levelForm.id;
    // 全查成语
    this.selectQuestion();
  },
  methods: {
    openUp(row) {
        this.upButton = true;
        const aa = JSON.stringify(row);
        this.upForm = JSON.parse(aa);
    },
    openAdd() {
          this.addButton = true;
      
    },
    insert() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.addForm.levelId = this.id;
          const arr = this.addForm.idiomValue.split("");
          const arrr = [];
          for (let a = 0; a < arr.length; a++) {
            arrr.push({});
            const num = a + 1;
            arrr[a].id = this.addForm.idiomValue + num;
            arrr[a].word = arr[a];
            arrr[a].space = "(0,0)";
            arrr[a].hide = 0;
            arrr[a].direction = 0;
          }
          this.addForm.wordInfo = JSON.stringify(arrr);
          const aa = pinyin(this.addForm.idiomValue, { type: "array" });
          this.addForm.pinYin ="["
          for(let a=0;a<aa.length;a++){
            if(a+1<aa.length){
              this.addForm.pinYin = this.addForm.pinYin+ aa[a]+" "
            }else{
              this.addForm.pinYin = this.addForm.pinYin+ aa[a]
            }
           
          }
          this.addForm.pinYin = this.addForm.pinYin+ "]"
          this.$axios
            .post("/JieLongIdiomQuestion/insertIdiom", this.addForm)
            .then((res) => {
              if (res.data.code === 200) {
                this.$message.success("添加成功");
                this.addButton = false
                this.addForm = {}
                  this.selectQuestion();
              }
            });
        }
      });
    },
    update() {},
    del(row) {
        this.$axios.get('JieLongIdiomQuestion/delIdiom',{
          params:{
            id:row.id
          }
        }).then((res)=>{
          if(res.data.code==200){
            this.$message.success("删除成功!")
            this.selectQuestion()
          }
        })
    },
    // 位置有字提交
    tijiaojiao() {
      // 获取选中成语的字信息
      const json = JSON.parse(this.form.idiomValue.wordInfo);
      const regex = /\d+/g;
      if (this.fangxiang == 0) {
        // 获取x轴坐标

        const x = parseInt(this.form.space.match(regex)[0]);
        // 判断填充词语是否超出坐标系

        // 获取y轴坐标
        const y = parseInt(this.form.space.match(regex)[1]);

        // 将字存入坐标
        let num = 0;
        // 获取指定位置字的下标
        for (let b = 0; b < json.length; b++) {
          if (this.trData[7 - y + 1].tdData[x - 1].word == json[b].word) {
            num = b;
          }
        }
        if (x - num <= 0) {
          this.$message.warning("该位置不可放横向成语");
          return;
        }
        if (x + num >= 10) {
          this.$message.warning("该位置不可放横向成语");
          return;
        }
        // 根据当前位置当前字的下标分配成语其他字的坐标
        for (let a = 0; a < json.length; a++) {
          // 判断当前字下标与制定下标关系
          // 相同
          if (a == num) {
            // x轴
            const xz = x;
            // 坐标位置
            json[a].space = "(" + xz + "," + y + ")";
            // 方向
            json[a].direction = this.fangxiang;
            // 隐藏显示
            if (json[a].space == this.form.space) {
              json[a].hide = this.hide;
            }
          }
          // 下标在指定字之前
          if (a < num) {
            const xz = x - num + a;
            json[a].space = "(" + xz + "," + y + ")";
            json[a].direction = this.fangxiang;
            if (json[a].space == this.form.space) {
              json[a].hide = this.hide;
            }
          }
          // 下标在指定字之后
          if (a > num) {
            const xz = a - num + x;
            json[a].space = "(" + xz + "," + y + ")";
            json[a].direction = this.fangxiang;
            if (json[a].space == this.form.space) {
              json[a].hide = this.hide;
            }
          }
        }
        // 存入成语id
        this.form.id = this.form.idiomValue.id;
        this.form.idiomValue = this.form.idiomValue.idiomValue;
        // 存入成语单字信息
        this.form.wordInfo = JSON.stringify(json);
        // 发送后端请求
        this.$axios
          .post("/JieLongIdiomQuestion/saveWordInfo", this.form)
          .then((res) => {
            // 判断是否成功
            if (res.data.code === 200) {
              this.$message.success("成功");
              // 将字信息赋值给回显数组
              this.wordData = this.wordData.map(
                (obj1) => json.find((obj2) => obj2.id === obj1.id) || obj1
              );
              // 刷新
              this.init();
              // 弹窗开关
              this.tianzi = false;
            } else {
              this.$message.warning("error submit!!!");
            }
          });
      }
      // 判断横纵向
      else if (this.fangxiang == 1) {
        // 获取y轴坐标
        const y = parseInt(this.form.space.match(regex)[1]);

        // 判断填充词语是否超出坐标系
        // 获取x轴坐标

        const x = parseInt(this.form.space.match(regex)[0]);
        // 将字存入坐标
        let num = 0;
        // 获取指定位置字的下标
        for (let b = 0; b < json.length; b++) {
          if (this.trData[7 - y + 1].tdData[x - 1].word == json[b].word) {
            num = b;
          }
        }
        if (y - num - 1 <= 0) {
          this.$message.warning("该位置不可放纵成语");
          return;
        }
        if (y + num > 8) {
          this.$message.warning("该位置不可放纵成语");
          return;
        }
        // 根据当前位置当前字的下标分配成语其他字的坐标
        for (let a = 0; a < json.length; a++) {
          // 判断当前字下标与制定下标关系
          // 下标在指定字之前
          if (a < num) {
            const yz = y + num - a;
            json[a].space = "(" + x + "," + yz + ")";
            json[a].direction = this.fangxiang;
            if (json[a].space == this.form.space) {
              json[a].hide = this.hide;
            }
          }
          // 相同
          if (a == num) {
            const yz = y;
            json[a].space = "(" + x + "," + yz + ")";
            json[a].direction = this.fangxiang;
            if (json[a].space == this.form.space) {
              json[a].hide = this.hide;
            }
          }
          // 下标在指定字之后
          if (a > num) {
            const yz = y - a + num;
            json[a].space = "(" + x + "," + yz + ")";
            json[a].direction = this.fangxiang;
            if (json[a].space == this.form.space) {
              json[a].hide = this.hide;
            }
          }
        }

        // 存入成语id
        this.form.id = this.form.idiomValue.id;
        this.form.idiomValue = this.form.idiomValue.idiomValue;
        // 存入成语单字信息
        this.form.wordInfo = JSON.stringify(json);
        // 发送后端请求
        this.$axios
          .post("/JieLongIdiomQuestion/saveWordInfo", this.form)
          .then((res) => {
            // 判断是否成功
            if (res.data.code === 200) {
              this.$message.success("成功");
              // 将字信息赋值给回显数组
              this.wordData = this.wordData.map(
                (obj1) => json.find((obj2) => obj2.id === obj1.id) || obj1
              );
              // 刷新
              this.init();
              // 弹窗开关
              this.tianzi = false;
            } else {
              this.$message.warning("error submit!!!");
            }
          });
      }
    },
    // 位置无字提交
    async tijiao() {
      try {
        // 获取成语信息
        const res = await this.$axios.get(
          "JieLongIdiomQuestion/selectQuestById",
          {
            params: {
              id: this.form.id,
            },
          }
        );

        if (res.data.code === 200) {
          // 解析成语信息
          this.jsonData = JSON.parse(res.data.data.wordInfo);
          const regex = /\d+/g;
          const x = parseInt(this.form.space.match(regex)[0]);
          const y = parseInt(this.form.space.match(regex)[1]);
          if (this.fangxiang === 0) {
            // 判断是否越界
            if (x + 4 > 11) {
              this.$message.warning("该位置不可放横向成语");
            } else {
              // 填充成语
              for (let a = 0; a < this.jsonData.length; a++) {
                const xz = x + a;
                this.jsonData[a].space = `(${xz},${y})`;
                this.jsonData[a].direction = this.fangxiang;
              }

              // 将成语信息转换为JSON字符串并存储
              this.form.wordInfo = JSON.stringify(this.jsonData);

              // 提交成语信息
              const response = await this.$axios.post(
                "/JieLongIdiomQuestion/saveWordInfo",
                this.form
              );

              if (response.data.code === 200) {
                // 提交成功
                this.$message.success("成功");

                // 更新回显数组
                this.wordData = this.wordData.map(
                  (obj1) =>
                    this.jsonData.find((obj2) => obj2.id === obj1.id) || obj1
                );

                // 刷新页面并关闭弹窗
                this.init();
                this.tianzi = false;
              } else {
                // 提交失败
                throw new Error("提交失败");
              }
            }
          } else if (this.fangxiang === 1) {
            // 判断是否越界
            if (y - 4 < 0) {
              this.$message.warning("该位置不可放纵成语");
            } else {
              // 填充成语
              for (let a = 0; a < this.jsonData.length; a++) {
                const yz = y - a;
                this.jsonData[a].space = `(${x},${yz})`;
                this.jsonData[a].direction = this.fangxiang;
              }

              // 将成语信息转换为JSON字符串并存储
              this.form.wordInfo = JSON.stringify(this.jsonData);

              // 提交成语信息
              const response = await this.$axios.post(
                "/JieLongIdiomQuestion/saveWordInfo",
                this.form
              );

              if (response.data.code === 200) {
                // 提交成功
                this.$message.success("成功");

                // 更新回显数组
                this.wordData = this.wordData.map(
                  (obj1) =>
                    this.jsonData.find((obj2) => obj2.id === obj1.id) || obj1
                );

                // 刷新页面并关闭弹窗
                this.init();
                this.tianzi = false;
              } else {
                // 提交失败
                throw new Error("提交失败");
              }
            }
          }
        }
      } catch (error) {
        // 错误处理
        this.$message.warning(error.message);
      }
    },
    // 打开分配成语弹窗
    open(item, j) {
      // 弹窗开关
      this.tianzi = true;
      // 判断该位置是否存在值
      if (j.word) {
        this.form = j;
        // 翻转方向
        this.fangxiang = this.form.direction === 0 ? 1 : 0;
        this.hide=j.hide
        console.log(this.form)
        // 查询并过滤词列表
        this.$axios
          .get("/JieLongIdiomQuestion/selectQuestion", {
            params: {
              levelId: this.id,
            },
          })
          .then((res) => {
            if (res.data.code === 200) {
              this.questionData = res.data.data.filter((obj) =>
                obj.idiomValue.includes(j.word)
              );
              this.tianzizi = 1;
            }
          });

        // 当前字信息赋值
        const coordinate = this.form.space;
        this.form.word = this.trData
          .flatMap((obj) => obj.tdData)
          .find((innerObj) => innerObj.space === coordinate)?.word;
      } else {
        this.$axios
          .get("/JieLongIdiomQuestion/selectQuestion", {
            params: {
              levelId: this.id,
            },
          })
          .then((res) => {
            if (res.data.code === 200) {
              this.questionData = res.data.data;
              this.tianzizi = 0;
              this.form = j;
            }
          });
      }
    },
    // 打开编辑器

    openbian() {
        // 将已填字信息存入到回显数组中
        for (let a = 0; a < this.questionData.length; a++) {
          const json = JSON.parse(this.questionData[a].wordInfo);
          this.wordData = this.wordData.concat(json);
        }
        // 初始化坐标系
        this.init();
        // 编辑器开关
        this.bian = true;
    },
    // 初始化坐标系
    init() {
      // 初始化坐标系数组
      this.trData = [];
      // 循环存y轴值
      for (let a = 8; a > 0; a--) {
        const rowData = {
          // y轴值
          id: a,
          // x轴数组
          tdData: [],
        };
        // 存入y轴值
        this.trData.push(rowData);
        // 存入坐标值
        for (let c = 0; c < 10; c++) {
          // x轴坐标
          const x = c + 1;
          // y轴坐标
          const y = rowData.id;
          // 拼接成坐标值
          const cellData = {
            space: `(${x},${y})`,
          };
          // 存入x轴数组
          rowData.tdData.push(cellData);
        }
      }
      // 将字的回显数组值根据坐标点赋值给坐标系数组
      for (let a = 0; a < this.wordData.length; a++) {
        // 判断字坐标点是否为(0,0)
        if (this.wordData[a].space != "(0,0)") {
          // 循环获取y轴点
          for (let b = 0; b < 8; b++) {
            // 循环获取x轴点
            for (let c = 0; c < 10; c++) {
              // 回显数组中字的坐标点匹配坐标系数组中的坐标点
              if (this.trData[b].tdData[c].space == this.wordData[a].space) {
                // 赋值坐标系文字
                this.trData[b].tdData[c].word = this.wordData[a].word;
                // 赋值坐标系文字是否隐藏
                this.trData[b].tdData[c].hide = this.wordData[a].hide;
                // 赋值坐标系文字id
                this.trData[b].tdData[c].id = this.wordData[a].id;
                this.trData[b].tdData[c].direction = this.wordData[a].direction;
              }
            }
          }
        }
      }
    },
    // 字的隐藏显示
    radioChange() {
      // 存储待发送的请求
      const requests = [];
      const result = this.form.hide == 0 ? "显示" : this.form.hide == 1 ? "隐藏" :"错误";
      this.$confirm('是否'+ result +'该字?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 循环获字信息
      this.questionData.forEach((question) => {
        const wordInfo = JSON.parse(question.wordInfo);
        // 循环获取当前位置字
        wordInfo.forEach((word) => {
          if (word.space === this.form.space) {
            // 设置隐藏
            word.hide = this.form.hide;
          }
        });
        // 设置请求信息
        question.wordInfo = JSON.stringify(wordInfo);
        this.xianForm.wordInfo = question.wordInfo;
        this.xianForm.id = question.id;

        // 将请求添加到队列中
        requests.push(
          this.$axios.post("/JieLongIdiomQuestion/saveWordInfo", this.xianForm)
        );
      });

      // 批量发送请求
      Promise.all(requests)
        .then((responses) => {
          if (responses.every((res) => res.status === 200)) {
            this.init();
          }
        })
        .catch((error) => {
          console.error(error);
        });
         this.openbian()
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
      
    },
    removeB() {
      this.trData = [];
      // 循环存y轴值
      for (let a = 8; a > 0; a--) {
        const rowData = {
          // y轴值
          id: a,
          // x轴数组
          tdData: [],
        };
        // 存入y轴值
        this.trData.push(rowData);
        // 存入坐标值
        for (let c = 0; c < 10; c++) {
          // x轴坐标
          const x = c + 1;
          // y轴坐标
          const y = rowData.id;
          // 拼接成坐标值
          const cellData = {
            space: `(${x},${y})`,
          };
          // 存入x轴数组
          rowData.tdData.push(cellData);
        }
      }
    },
    selectQuestion() {
      this.$axios
        .get("/JieLongIdiomQuestion/selectQuestion", {
          params: {
            levelId: this.id,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.questionData = res.data.data;
            this.levelForm.num = this.questionData.length;
            for (let b = 0; b < this.questionData.length; b++) {
              const cc = pinyin(this.questionData[b].idiomValue, {
                type: "array",
              });
              this.questionData[b].pinyin = "[ " + cc.join(" ") + " ]";
            }
            this.questionData1 = JSON.parse(JSON.stringify(this.questionData));
          }
        });
    },
    addHandleClose(done) {
      // 在这里编写您的关闭逻辑
      // 例如执行某个操作后再关闭对话框
      this.addForm = {};
      // 调用 done() 方法来关闭对话框
      this.addButton = false;
    },
    upHandleClose(done) {
      // 在这里编写您的关闭逻辑
      // 例如执行某个操作后再关闭对话框
      this.upForm = {};
      // 调用 done() 方法来关闭对话框
      this.upButton = false;
    },
    // infoHandleClose(done) {
    //   // 在这里编写您的关闭逻辑
    //   // 例如执行某个操作后再关闭对话框
    //   this.infoForm = {};
    //   // 调用 done() 方法来关闭对话框
    //   this.infoButton = false;
    // },
  },
};
</script>

<style>
.spans {
  margin-right: 10px; /* 设置右边间距的像素值 */
}
.spannb:hover {
  cursor: pointer;
}
.span {
  color: #409eff;
  margin: 10px;
}
.span:hover {
  cursor: pointer;
}
.custom-div {
  width: 60px;
  height: 60px;
  margin: 10px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.headerBg {
  background: #f8f8f9 !important;
}
.text {
  font-weight: bold;
  font-size: 26px;
  color: #503228;
}
.wordxuanze {
  background: #fff;
  width: 40px;
  height: 40px;
  float: left;
  border: 2px solid black;
  margin: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wordxuanze :hover {
  cursor: pointer;
}
.activeCss {
  /* 定义选中状态的样式 */
  background-color: red;
}
.activeCss1 {
  background-color: red;
}
.wordxianshi {
  background: #fff;
  width: 33px;
  height: 33px;
  float: left;
  border: 3px solid black;
  margin: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wordxianshi :hover {
  cursor: pointer;
}
td {
  margin: 10px;
}
</style>